Fragments

In this article We will understand about Fragments in React.

We have seen how do we create components in React and how do we return elements from the Component. But any component we create in React, can only return one element. If we look at the code what we have developed in our previous video, if we observe all the components are returning one div container.

Now what will happen if We return multiple elements from one Component. React will throw us an error. But it is very common scenario we face in our day to day programming life that we want to return multiple elements from one component.

It might be creating a component which is responsible for iterating through a list and returning multiple table row elements or iterating through an object and returning multiple td elements or returning multiple div containers.

Lets have a look at our Order Component Class. We have created the outer div just because our Order Component class wants to return multiple elements from the render method. Now what if we don’t want to enclose our ProductInfo Component, Address Info Component and Summary Component inside div.

Lets take another example. Now lets go to our Error Boundary class we have created, lets assume that from render method we want to return two div containers. One Container returns the contents of the error object and the other container returns the contents of the errorInfo object which shows us the component stack.

Lets copy the existing div contents and paste it again. We want to return two div containers. This will throw us the error. Now we can solve this error is by creating one parent div and we can place these two div containers as child elements inside that parent div.

But keep adding too many unnecessary DOM elements makes the DOM heavy, that may have an impact on the performance and will also introduce UI issues like styling, alignment.

In order to avoid adding new DOM elements, React introduces a concept called as Fragments using which we can return multiple elements from one component without creating additional DOM nodes.

Now lets add a new Element called as React.Fragment and place the two div containers with in the scope of this.

<React.Fragment>

        <div>

          <h2>We are having Problems to Load your Preferrences now.</h2>

        </div>

        <div>

        <h2>We are having Problems to Load your Preferrences now.</h2>

      </div>

      </React.Fragment>

Save these changes. Navigate to the browser. We can see the output.

Now lets remove the additional div we have created in the Order Component render method as well by using Fragments. Before we go further, lets open developer tools, inspect our Product Information component contents, we can see that we have our root div container. Inside that we have another div and with in this child div we have our contents.

Lets replace the inner div using Fragments.

There is a new, shorter syntax we can use for declaring fragments. It looks like empty tags.

<>
        <h1>Product Order Screen...</h1>
        <ProductInformationComponent quantity={this.state.quantity}
                            onQuantityChange={this.orderInfoChanged}></ProductInformationComponent>

        <AddressComponent address={this.state.address} 
                      onAddressChange={this.addressChanged}></AddressComponent>
    
        <SummaryComponent quantity={this.state.quantity} address={this.state.address} 
                      onQuantityChange={this.orderInfoChanged}></SummaryComponent>
      </>

Lets save these changes. Navigate to the browser. open developer tools, inspect our Product Information component contents, we can see that we have our root div container. Inside the root container we can see we have our contents directly.

Fragment only supports one attribute. That is the key attribute, used when mapping a collection to an array of components.

In the future, React may add support for additional attributes, such as event handlers.

Fragments

Video Reference: